<template>
  <div class="realizeBox">
    <div class="orderH flex f-s f18 c2a">积分订单</div>
    <div class="orderCBox">
      <div class="orderCListBox">
        <template v-for="(v, k) in listArr">
          <div
            class="orderCItemBox"
            :key="k + 'listArr'"
            v-if="
              (screenState == 0 || screenState == v.state.stateNum) &&
              k >= (dqYm - 1) * 9 &&
              k < dqYm * 9
            "
          >
            <div class="orderCItemHBox flex f-s">
              <div class="orderCItemHText orderCItemHText1">订单号：</div>
              <div class="orderCItemHText orderCItemHText2">{{ v.ddh }}</div>
              <div class="orderCItemHText orderCItemHText3">下单日期：</div>
              <div class="orderCItemHText orderCItemHText4">{{ v.xdrq }}</div>
              <div class="orderCItemHText orderCItemHText6">订单状态：</div>
              <div class="orderCItemHText orderCItemHText7">{{ v.state.text }}</div>
            </div>
            <div class="orderCItemCBox">
              <div class="orderCItemC1Box">
                <div class="flex f-s fd-c">
                  <div
                    class="orderCItemC1SpInfoItem flex f-s ai-fs"
                    v-for="(rv, rk) in v.spArr"
                    :key="rk + 'spArr' + k"
                  >
                    <div class="orderCItemC1SpImgBox flex">
                      <img :src="rv.imgUrl" alt="" />
                    </div>
                    <div class="orderCItemC1SpName flex f-s">{{ rv.name }}</div>
                    <div class="orderCItemC1SpSs flex f-s">{{ rv.ss }}</div>
                    <div class="orderCItemC1SpJs flex f-s">
                      {{" x " + rv.num }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="orderCItemC2Box flex fd-c">
                <span class="orderCItemC2SpZj">积分：{{ v.tjf + v.zj }}</span>
              </div>
              <div class="orderCItemC3Box flex fd-c">
                <div
                  class="orderCItemC3Cz flex"
                  :class="{ 'orderCItemC3Cz-c9': xv == '取消订单' }"
                  v-for="(xv, xk) in v.czArr"
                  :key="xk + 'czArr' + k"
                  @click="goTransfer(xv, v)"
                >
                  {{ xv }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>

      <div class="orderCListFyqBox flex">
        <div class="btnL flex" @click="ymDown(dqYm)">
          <img src="../../../../../assets/zfc/个人中心/账单/分页器左箭头.png" alt="" />
        </div>
        <div class="YmNumBox flex">
          <template v-for="(v, k) in ymArr">
            <div
              class="ym flex"
              :class="{ ymOn: v.falg }"
              :key="k + 'ymArr'"
              @click="OnYm(k)"
            >
              {{ v.num }}
            </div>
          </template>
        </div>
        <div class="btnR flex" @click="ymUp(dqYm)">
          <img src="../../../../../assets/zfc/个人中心/账单/分页器右箭头.png" alt="" />
        </div>
        <input class="toYm flex" type="text" v-model="toYm" />
        <span class="maxYm flex">/{{ maxYm }}</span>
        <div class="goYm flex" @click="goYm()">跳转</div>
      </div>

      <div v-if="listArr.length == 0">
        <img
          class="orderCImg"
          src="../../../../../assets/zfc/个人中心/账单/空账单.png"
          alt=""
        />
        <div class="orderCText">您还没有订单哦！</div>
        <div class="orderCBtn flex" @click="goIndex()">去首页看看</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyJfDd",
  data() {
    return {
      arr: this.$store.state.orderHArr,
      listArr: this.$store.state.jfDdListArr,
      screenState: 0,
      maxYm: 1,
      dqYm: 1,
      toYm: "",
      ymArr: [],
    };
  },
  methods: {
    getYmArr() {
      var maxYm = Math.ceil(this.listArr.length / 9);
      this.maxYm = maxYm;
      var arr = [];
      for (let i = 1; i <= maxYm; i++) {
        var obj = {
          num: i,
          falg: false,
        };
        arr.push(obj);
      }
      this.ymArr = arr;
    },
    ymUp(k) {
      if (k < this.maxYm) {
        this.OnYm(k);
      }
    },
    ymDown(k) {
      if (k - 2 >= 0) {
        this.OnYm(k - 2);
      }
    },
    goYm() {
      console.log(this.toYm);
      var k = Number(this.toYm);
      if (k > 0 && k <= this.maxYm) {
        this.OnYm(k - 1);
      } else {
        window.alert("请输入正确的页码");
      }
    },
    On(k, stateNum) {
      this.$store.commit("setOrderHArr", k);
      this.screenState = stateNum;
    },
    OnYm(k) {
      this.ymArr.forEach((v) => {
        v.falg = false;
      });
      this.dqYm = k + 1;
      this.ymArr[k].falg = true;
    },
    goIndex() {
      if (this.$route.name != "Index") {
        this.$router.push({ name: "Index" });
      }
    },
    goTransfer(v, yuan) {
      if (v == "查看详情") {
        this.$router.push({
          path:"/myjfddinfo",
          query:{
            yuan:JSON.stringify(yuan),
          }
        })
      }else if(v == "去评价"){
        this.$router.push({
          path:"/orderevaluate",
          query:{
            yuan:JSON.stringify(yuan),
          }
        })
      }
    },
  },
  mounted() {
    console.log(this.listArr);
    this.getYmArr();
    this.ymArr[0].falg = true;
  },
};
</script>

<style scoped>
* {
  font-size: 0;
  color: #333333;
}
.f-s {
  justify-content: flex-start;
}
.f-e {
  justify-content: flex-end;
}
.fd-c {
  flex-direction: column;
}
.ai-fs {
  align-items: flex-start;
}
.f18 {
  font-size: 18px;
}
.f16 {
  font-size: 16px;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.c3 {
  color: #333333;
}
.c6 {
  color: #666666;
}
.c9 {
  color: #999999;
}
.c25 {
  color: #252525;
}
.c2a {
  color: #2a2a2a;
}
</style>

<style scoped>
.realizeBox {
  width: 100%;
}
.orderH {
  width: calc(100% - 2px);
  height: 56px;
  border: 1px solid #e9e9e9;
  text-indent: 20px;
}
.orderCBox {
  width: calc(100% - 2px);
  min-height: 566px;
  border: 1px solid #e9e9e9;
  border-top: none;
  overflow: hidden;
  position: relative;
}
.orderCRBox {
  width: calc(100% - 20px);
  margin: 20px 0 0 20px;
  position: relative;
}
.orderCRText {
  height: 28px;
  padding: 0 15px;
  margin: 0 17px;
  font-size: 12px;
  color: #666666;
  cursor: pointer;
}
.orderCRTextOn {
  color: #ffffff;
  background-color: #f08200;
}
.orderCRText:nth-of-type(1) {
  margin-left: 0;
}
.hrBox {
  width: 2px;
  height: 28px;
}
.hr1 {
  width: 1px;
  height: 17px;
  background-color: #999999;
}
.hr2 {
  width: 1px;
  height: 17px;
  background-color: #d3d3d3;
}
.recycle {
  height: 28px;
  font-size: 12px;
  color: #4b943d;
  text-decoration: underline;
  position: absolute;
  top: 0;
  right: 18px;
}
.orderCImg {
  width: 76;
  height: 100px;
  position: absolute;
  top: 239px;
  left: 400px;
}
.orderCBtn {
  width: 170px;
  height: 45px;
  font-size: 13.5px;
  color: #ffffff;
  background-color: #f08200;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  top: 294px;
  left: 516px;
}
.orderCText {
  font-size: 15px;
  color: #666666;
  position: absolute;
  top: 244px;
  left: 516px;
}
/* 列表样式 */
.orderCListBox {
  width: 1046px;
  margin: 20px 0 40px 20px;
}
.orderCItemBox {
  margin-bottom: 20px;
}
.orderCItemHBox {
  height: 46px;
  border: 1px solid #e9e9e9;
  border-bottom: none;
  background-color: #f2f2f2;
}
.orderCItemHText {
  line-height: 12px;
  font-size: 12px;
  color: #333333;
}
.orderCItemCBox {
  position: relative;
}
.orderCItemC1Box {
  width: 699px;
}
.orderCItemC2Box {
  width: 208px;
  height: 100%;
  border: 1px solid #e9e9e9;
  border-top: 0;
  border-left: 0;
  position: absolute;
  top: 0;
  right: 138px;
}
.orderCItemC3Box {
  width: 137px;
  height: 100%;
  border: 1px solid #e9e9e9;
  border-top: 0;
  border-left: 0;
  position: absolute;
  top: 0;
  right: 0;
}
/* 商品信息 */
.orderCItemC1SpInfoItem {
  width: 697px;
  height: 120px;
  border: 1px solid #e9e9e9;
  border-top: none;
  position: relative;
}
.orderCItemC1SpImgBox {
  width: 78px;
  height: 78px;
  margin: 20px 20px 0 20px;
  border: 1px solid #e9e9e9;
}
.orderCItemC1SpName {
  width: 170px;
  height: 100%;
  margin-right: 75px;
  font-size: 10.5px;
  color: #666666;
}
.orderCItemC1SpSs {
  width: 90px;
  height: 100%;
  margin-right: 55px;
  font-size: 10.5px;
  color: #999999;
}
.orderCItemC1SpJs {
  width: 150px;
  height: 100%;
  margin-right: none;
  font-size: 10.5px;
  color: #666666;
}
.orderCItemC2SpZj,
.orderCItemC2YfZj {
  line-height: 22.5px;
  font-size: 10.5px;
  color: #666666;
}
.orderCItemC3Cz {
  width: 90px;
  height: 30px;
  margin: 10px 0;
  font-size: 10.5px;
  color: #ffffff;
  background-color: #f08200;
  border-radius: 5px;
  cursor: pointer;
}
.orderCItemC3Cz-c9 {
  background-color: #999999;
}
.orderCItemC3Cz:nth-of-type(1) {
  width: auto;
  color: #4b943d;
  text-decoration: underline;
  background-color: #ffffff;
  border-radius: 0;
}
/* 顶部文本布局 */
.orderCItemHText1 {
  width: 50px;
  margin-left: 20px;
}
.orderCItemHText2 {
  width: 135px;
  margin-right: 45px;
}
.orderCItemHText3 {
  width: 65px;
}
.orderCItemHText4 {
  width: 180px;
  margin-right: 440px;
}
.orderCItemHText5 {
  width: 300px;
  color: #4b943d;
  margin-right: 63px;
}
.orderCItemHText6 {
  width: auto;
}
.orderCItemHText7 {
  color: #f08200;
}
/* 分页器 */
.orderCListFyqBox {
  height: 32px;
  margin-bottom: 40px;
}
.btnL {
  width: 51px;
  height: 32px;
  background-color: #dddddd;
  margin-right: 26px;
  cursor: pointer;
}
.btnR {
  width: 51px;
  height: 32px;
  background-color: #498e3d;
  margin-left: 26px;
  margin-right: 27px;
  cursor: pointer;
}
.ym {
  width: 51px;
  height: 32px;
  margin: 0 14px;
  font-size: 16.5px;
  color: #666666;
  cursor: pointer;
}
.ymOn {
  background-color: #498e3d;
  color: #ffffff;
}
.toYm {
  width: 50px;
  height: 30px;
  font-size: 16.5px;
  color: #666666;
  text-align: center;
  margin-right: 20px;
  border: none;
  border: 1px solid #d2d2d2;
  outline: none;
}
.maxYm {
  font-size: 16.5px;
  color: #666666;
  margin-right: 20px;
}
.goYm {
  width: 51px;
  height: 32px;
  background-color: #f08200;
  font-size: 12px;
  color: #ffffff;
}
</style>
